/*#region 圆角*/
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

/*#endregion*/

/*#region 自定义*/
@mixin placeholder($font-size:null, $color:null, $font-family:font-family, $opacity:null, $text-align:null) {
    @if $opacity==null {
        $opacity: 1;
    }

    @if $text-align==null {
        $text-align: left;
    }

    @if $font-family==null {
        $font-family: $default-font-family;
    }

    ::-webkit-input-placeholder {
        font-size: $font-size !important;
        color: $color !important;
        opacity: $opacity !important;
        text-align: $text-align !important;
        font-family: $font-family;
    }

    ::-moz-placeholder {
        font-size: $font-size !important;
        color: $color !important;
        opacity: $opacity !important;
        text-align: $text-align !important;
        font-family: $font-family;
    }

    :-ms-input-placeholder {
        font-size: $font-size !important;
        color: $color !important;
        opacity: $opacity !important;
        text-align: $text-align !important;
        font-family: $font-family;
    }

    ::placeholder {
        font-size: $font-size !important;
        color: $color !important;
        opacity: $opacity !important;
        text-align: $text-align !important;
        font-family: $font-family;
    }
}

/*#endregion*/

/*#region 阴影*/
@mixin box-shadow($value) {
    -webkit-box-shadow: $value;
    -moz-box-shadow: $value;
    -ms-box-shadow: $value;
    box-shadow: $value;
}

/*#endregion*/

/*#region 旋转*/
@mixin rotate($value) {
    transform: rotate($value);
    -ms-transform: rotate($value);
    -moz-transform: rotate($value);
    -webkit-transform: rotate($value);
    -o-transform: rotate($value);
}

@mixin rotateY($value) {
    transform: rotateY($value);
    -ms-transform: rotateY($value);
    -moz-transform: rotateY($value);
    -webkit-transform: rotateY($value);
    -o-transform: rotateY($value);
}

/*#endregion*/

/*#region ico,背景*/
@mixin bg-size($size...) {
    -moz-background-size: $size;
    -o-background-size: $size;
    -webkit-background-size: $size;
    background-size: $size;
}

@mixin bg($size, $position: center) {
    @include bg-size($size);
    background-repeat: no-repeat;
    background-position: $position;
}

@mixin bg-list($path, $prefix, $list...) {

    //遍历生成背景样式
    @each $animal in $list {
        .#{$prefix}-#{$animal} {
            background-image: url("#{$path}#{$animal}.png");
        }
    }
}

@mixin bg-gradient($list...) {
    //遍历生成渐变样式
    background: -moz-linear-gradient(bottom left, $list);
    background: -webkit-linear-gradient(bottom left, $list);
    background: -o-linear-gradient(bottom left, $list);
    background: -ms-linear-gradient(to top right, $list);
    background: linear-gradient(to top right, $list);
}

/*
用于批量生成ico图标css,第一个参数为路径
后面的参数如car 会生成ico-car样式,注意图标名称必须也是car.png
@include ico-list(
    "~@/assets/imges/ico/shop/",
    "car",
    "card",
    "maintenance",
    "onlinecar",
    "phone",
    "surance"
);
*/
@mixin ico-list($path, $list...) {
    @include bg-list($path, 'ico', $list...);
}

/*
用于批量生成背景图标css,第一个参数为路径
后面的参数如car 会生成img-car样式,注意图标名称必须也是car.png
@include ico-list(
    "~@/assets/imges/shop/",
    "car",
    "card"
);
*/
@mixin img-list($path, $list...) {
    @include bg-list($path, 'img', $list...);
}

/*
 利用linear-gradient生成右边线
*/
@mixin gradient-right-line($color) {
    background-image: -webkit-gradient(linear, left top, left bottom, from($color), to($color)), -webkit-gradient(linear, left top, left bottom, from($color), to($color));
    background-image: linear-gradient($color, $color), linear-gradient($color, $color);
    // 需以下样式支持
    // background-repeat: no-repeat;
    // background-size: 1px 100%, 100% 1px;
    // background-position: 100% 0, 100% 100%;
}

/*#endregion*/

/*#region 盒模型*/
@mixin box-display($direction) {
    flex-direction: $direction;
    /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -webkit-box;
    /* 老版本语法: Firefox (buggy) */
    display: -moz-box;
    /* 混合版本语法: IE 10 */
    display: -ms-flexbox;
    /* 新版本语法: Chrome 21+ */
    display: -webkit-flex;
    display: flex;
}

@mixin box-flex($value) {
    flex-grow: $value;
    -moz-box-flex: $value;
    -webkit-box-flex: $value;
    box-flex: $value;
    flex: $value;
}

@mixin box-align($align, $justify) {
    justify-content: $justify;
    align-items: $align;
}

/*#endregion*/

/*#region 按钮*/
//按钮ui基础mixin
@mixin button($ui,
    $default: null,
    $height:null,
    $line-height:null,
    $border-radius:null,
    $border-width: 0,
    $border-color: null,
    $border-color-active: null,
    $border-color-hover: null,
    $border-color-disabled: null,
    $border-style: null,
    $padding: null,
    $background-color: null,
    $background-color-active: null,
    $background-color-hover: null,
    $background-color-disabled: $button-default-background-color-disabled,
    $color: $button-default-color,
    $color-active: null,
    $color-hover: null,
    $color-disabled: null,
    $font-size: null,
) {

    //如果有背景色
    @if $background-color {
        @if $background-color !=transparent {

            //如果没有设置按下背景色
            @if $background-color-active==null {
                //自动设置背景色
                $background-color-active: mix(#fff, $background-color, 5%);
            }

            //如果没有设置经过时背景色
            @if $background-color-hover==null {
                //自动设置经过时背景色
                $background-color-hover: mix(#000, $background-color, 5%);
            }
        }
    }

    //如果有文字色
    @if $color {

        //如果没有设置按下文字色
        @if $color-active==null {
            //自动设置按钮文字色
            $color-active: mix(#fff, $color, 5%);
        }

        @if $color-hover==null {
            //自动设置经过时背景色
            $color-hover: mix(#000, $color, 5%);
        }

        @if $color-disabled==null {
            //禁用文字颜色
            $color-disabled: $color;
        }

        @if $border-color-disabled==null {
            //边框禁用颜色
            $border-color-disabled: $color;
        }
    }

    //加.el-button用来保证css权重够高
    .el-button {

        //如果$default为空自动添加自定义前缀
        @if $default==null {
            $ui:btn-#{$ui};
        }

        //根据ui自动生成对应的class
        &.#{$ui} {
            //边框圆角
            @include border-radius($border-radius);
            //背景色
            background-color: $background-color;

            //边框
            border: {
                width: $border-width;
                color: $border-color;
                style: $border-style;
            }

            //高
            height: $height;
            //行高
            line-height: $line-height;
            //内边距
            padding: $padding;
            //字体颜色
            color: $color;
            //字体大小
            font-size: $font-size;

            //按钮按下时样式,避免默认样式污染
            &:focus {
                color: $color;
                border-color: $border-color;
                background-color: $background-color;
            }

            //鼠标经过按钮时样式
            &:hover {
                color: $color-hover;
                border-color: $border-color-hover;
                background-color: $background-color-hover;
            }

            //按钮按下时样式
            &:active {
                color: $color-active;
                border-color: $border-color-active;
                background-color: $background-color-active;
            }

            //禁用时样式
            &.is-disabled {
                color: $color-disabled;
                border-color: $border-color-disabled;
                background-color: $background-color-disabled;
            }
        }
    }
}

/*#endregion*/